import generatorForm from '@/components/Form/mixins/generator';
import { getTemplateFields } from '@/api/flow/template';
import {
  inputType,
  fileType,
  datetimeType,
  radioType,
  selectType,
  checkboxType,
  textareaType,
  addressType,
  tableType,
  layoutType,
  groupType,
  numberType
} from '@/components/Form/fieldType';

export default {
  mixins: [generatorForm],

  data() {
    return {
      // forms
      formField: {
        labels: ['借款金额', '还款方式', '借多久', '怎么还', '还款计划', '收款卡'],
        fields: []
      },

      isFormField: false,
      // fields
      // fieldLabels: ['借款金额', '还款方式', '借多久', '怎么还', '还款计划', '收款卡'],

      // 表单
      // formFields: [],

      // 表单
      templateFields: [],

      formComponent: [],

      // fields promise
      fieldsPromise: null
    };
  },

  computed: {
    // 表单
    fieldss() {
      return { name: '流程内容', generator: this.templateFields };
    },

    // momey field
    momeyField() {
      return this.findGeneratorField(this.formField.labels[0]);
    },

    // mode field
    modeField() {
      return this.findGeneratorField(this.formField.labels[1]);
    },

    // time field
    timeField() {
      return this.findGeneratorField(this.formField.labels[2]);
    },

    // time field
    paybackField() {
      return this.findGeneratorField(this.formField.labels[3]);
    },

    // card field
    cardField() {
      return this.findGeneratorField(this.formField.labels[5]);
    }
  },

  async created() {
    this.fieldsPromise = this.getTemplateFields(this.tid);
    // await this.getTemplateFields();
  },

  methods: {
    // 获取表单信息
    getTemplateFields() {
      return new Promise((resolve, reject) => {
        getTemplateFields(this.tid)
          .then((response) => {
            // this.templateFields = fields;
            this.generateFormFields(response);

            // init fields
            this.generatorComp(this.formField.fields);
            console.log(this.formComponent, 'dadadcassd');
            this.form = this.$form.createForm(this);

            resolve(response);
          })
          .catch((err) => reject(err));
      });
    },

    // find generator field
    findGeneratorField(title) {
      const index = this.formComponent
        .findIndex(({ prop }) => {
          console.log(prop, this.formComponent, '=da==');
          return prop.label === title;
        });

      return this.formComponent[index].prop;
    },

    // rules
    getFieldProp(field) {

    },

    // 生成表单
    generateFormFields(fields) {
      // get fields
      fields.forEach((fs) => this.layoutField(fs));
    },

    // 判断是否布局
    layoutField(fs) {
      // fields
      const { table } = tableType;

      // layout
      const { group } = groupType;
      const { ortc, explain } = layoutType;

      console.log(fs.type, group, 'dadadadddd');
      switch (fs.type) {
        case group.type:
          this.generateFormFields(fs.groups);
          break;

        case ortc.type:
          this.generateFormFields(fs.fields);
          break;

        case explain.type:
        case table.type:
          break;

        default:
          this.isExistField(fs);
      }

      // const layouts = [ortc, group]

      // fields
      // const { file, image } = fileType;
      // const { input, sys } = inputType;
      // const { number } = numberType;
      // const { textarea } = textareaType;
      // const { radio } = radioType;
      // const { checkbox } = checkboxType;
      // const { select } = selectType;
      // const { address } = addressType;
      // const { datetime } = datetimeType;

      // return layouts;
    },

    // 是否当前表单
    isExistField(field) {
      console.log(field, 'dadadadddd');
      const index = (this.formField.labels.indexOf(field.title));

      if (index > -1) {
        this.formField.fields.push(field);
      }
    }
  }
};
